import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

// 定义商品类型
interface GoodsItemType {
  goods_id: number;
  goods_name: string;
  goods_img: string;
  shop_price: number;
  sales_count: number;
}

// 模拟商品数据接口
const fetchGoodsData = async (): Promise<GoodsItemType[]> => {
  // 模拟从服务器获取数据
  return [
    {
      goods_id: 1,
      goods_name: '飞鹤婴幼儿配方奶粉 2段 -星飞帆2段 700g 1罐',
      goods_img:
        'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/311393/2/20135/234148/6884526eF96cf773b/3a03041bb3dbbb0f.jpg!q70.dpg.webp',
      shop_price: 204.9,
      sales_count: 29000,
    },
    {
      goods_id: 2,
      goods_name:
        'vivo iQOO Z9 Turbo长续航版【国家补贴】12GB+256GB 星光白 第三代骁龙8s 6400mAh电池 电竞手机 ',
      goods_img:
        'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/292333/18/21642/75404/687a1333F118dd18e/fa5dc505f1f2755b.jpg!q70.dpg.webp',
      shop_price: 1499.0,
      sales_count: 15000,
    },
    {
      goods_id: 3,
      goods_name:
        '【甘肃直发】正宗现摘民勤沙漠蜜瓜 新鲜时令香甜多汁甜瓜整箱 优选精品装 9斤带箱净重8-9斤2-4个',
      goods_img:
        'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/299339/27/10206/130897/6878ba1bF58be6a5a/90a9e0c96caa6f6f.jpg!q70.dpg.webp',
      shop_price: 65.5,
      sales_count: 8000,
    },
    {
      goods_id: 4,
      goods_name:
        '【甘肃直发】正宗现摘民勤沙漠蜜瓜 新鲜时令香甜多汁甜瓜整箱 优选精品装 9斤带箱净重8-9斤2-4个',
      goods_img:
        'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/299339/27/10206/130897/6878ba1bF58be6a5a/90a9e0c96caa6f6f.jpg!q70.dpg.webp',
      shop_price: 65.5,
      sales_count: 8000,
    },
    {
      goods_id: 5,
      goods_name:
        '【甘肃直发】正宗现摘民勤沙漠蜜瓜 新鲜时令香甜多汁甜瓜整箱 优选精品装 9斤带箱净重8-9斤2-4个',
      goods_img:
        'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/299339/27/10206/130897/6878ba1bF58be6a5a/90a9e0c96caa6f6f.jpg!q70.dpg.webp',
      shop_price: 65.5,
      sales_count: 8000,
    },
    {
      goods_id: 6,
      goods_name:
        '【甘肃直发】正宗现摘民勤沙漠蜜瓜 新鲜时令香甜多汁甜瓜整箱 优选精品装 9斤带箱净重8-9斤2-4个',
      goods_img:
        'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/299339/27/10206/130897/6878ba1bF58be6a5a/90a9e0c96caa6f6f.jpg!q70.dpg.webp',
      shop_price: 65.5,
      sales_count: 8000,
    },
    {
      goods_id: 7,
      goods_name:
        '【甘肃直发】正宗现摘民勤沙漠蜜瓜 新鲜时令香甜多汁甜瓜整箱 优选精品装 9斤带箱净重8-9斤2-4个',
      goods_img:
        'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/299339/27/10206/130897/6878ba1bF58be6a5a/90a9e0c96caa6f6f.jpg!q70.dpg.webp',
      shop_price: 65.5,
      sales_count: 8000,
    },
  ];
};

const WaterFlowGoods: React.FC = () => {
  const [goodsList, setGoodsList] = useState<GoodsItemType[]>([]);

  // 获取商品数据
  useEffect(() => {
    const fetchData = async () => {
      const data = await fetchGoodsData();
      setGoodsList(data);
    };
    fetchData();
  }, []);

  // 渲染商品项
  const renderItem = ({ item }: { item: GoodsItemType }) => (
    <TouchableOpacity
      style={styles.goodsItem}
      onPress={() => {
        console.log('跳转到商品详情页', item.goods_id);
      }}
    >
      <Image source={{ uri: item.goods_img }} style={styles.goodsImage} />
      <Text numberOfLines={3} ellipsizeMode="tail" style={styles.goodsName}>
        {item.goods_name}
      </Text>
      <Text style={styles.salesCount}>已销售{item.sales_count}件</Text>
      <View style={styles.priceContainer}>
        <Text style={styles.price}>￥{item.shop_price}</Text>
        <TouchableOpacity
          style={styles.addToCartButton}
          onPress={async () => {
            console.log('加入购物车', item.goods_id);
          }}
        >
          <Text style={styles.addToCartButtonText}>加入购物车</Text>
        </TouchableOpacity>
      </View>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={goodsList}
        numColumns={2} // 设置两列布局
        keyExtractor={item => item.goods_id.toString()}
        renderItem={renderItem}
        contentContainerStyle={styles.contentContainer}
      />
    </View>
  );
};

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  contentContainer: {
    paddingHorizontal: 10,
    paddingTop: 10,
    justifyContent: 'space-around',
  },
  goodsItem: {
    width: '48%',
    marginVertical: 5,
    backgroundColor: '#fff',
    borderRadius: 10,
    overflow: 'hidden',
    marginBottom: 15,
  },
  goodsImage: {
    width: '96%',
    height: 150,
    resizeMode: 'cover',
  },
  goodsName: {
    fontSize: 14,
    color: '#333',
    padding: 10,
    fontWeight: 'bold',
  },
  salesCount: {
    fontSize: 12,
    color: '#999',
    padding: 10,
  },
  priceContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
  },
  price: {
    fontSize: 16,
    color: 'red',
    fontWeight: 'bold',
  },
  addToCartButton: {
    backgroundColor: '#ffdd00',
    padding: 5,
    borderRadius: 5,
  },
  addToCartButtonText: {
    fontSize: 12,
    color: '#333',
    textAlign: 'center',
  },
});

export default WaterFlowGoods;
